<template>
<div class="vip">
    <my-header></my-header>
    <div>
            <div class="banner">
                <div class="container">
                    <h2>YHA<font>®</font>会员卡，带您享尽全球青年旅舍<font>®</font>住宿优惠</h2>
                    <div class="bottom">
                        <router-link to="/apply">申请会员卡</router-link>
                        <router-link to="/continue">会员续卡</router-link>
                       <router-link to="/discount">会员优惠</router-link>
                    </div>
                </div>
                <i></i>
            </div>
            <div class="box2">
                <h2>一卡在手，走遍全球；更多优惠，更多机会！</h2>
                <div class="card">
                    <dl>
                        <dt>
                            <img src="http://www.yhachina.com/data/images/2016-05-05/572b297206026.jpg" alt="">
                        </dt>
                        <dd>
                            <h3>国际畅游</h3>
                            <p>除住宿优惠外，更有多项国际旅游优惠，涵盖食、住、行、邮、购、娱方方面面，惊喜连连！</p>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <img src="http://www.yhachina.com/data/images/2016-05-05/572b2993e8024.jpg" alt="">
                        </dt>
                        <dd>
                            <h3>更多精彩</h3>
                            <p>青年旅舍每年都将举办多项国际交流活动和文化旅游活动，成为会员将享有优先参与的机会和参与优惠！</p>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <img src="http://www.yhachina.com/data/images/2016-05-05/572b2956d1c51.jpg" alt="">
                        </dt>
                        <dd>
                            <h3>全球通用</h3>
                            <p>拥有YHA会员卡，您可以在全球青年旅舍享受住宿优惠。</p>
                        </dd>
                    </dl>
                </div>
            </div>

            <div class="box3">
            <div class="banner2">
                <div class="middle2">
                    <h2>申请YHA<font>®</font>会员卡，开启您的精彩旅程</h2>
                    <div class="five">
                        <a href="">绑定电子会员卡</a>
                        <a href="">会员问与答</a>
                        <a href="">申请方法</a>
                        <a href="">会员卡辨伪</a>
                        <a href="">代理商加盟</a>
                    </div>
                    <div class="bottom2">
                        <a href="">马上申请</a>
                    </div>
                </div>
                <i></i>
            </div>
            
            <div class="blue">
                <div class="middle3">
                    <h2>如果您的会员已过期，可申请续卡</h2>
                    <div class="bottom3">
                        <a href="">马上续卡</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="select">
            <h2>选择会员卡类型</h2>
            <div class="bottom4">
                <div class="list1">
                    <div class="top1">
                        <a href="">
            
                            <img src="http://www.yhachina.com/data/images/2016-05-05/572b2e449ef55.jpg" alt="">
                        </a>
                    </div>
                    <div class="explain">
                        <h3>国际青年旅舍会员卡</h3>
                        <p>全球通用，可以享受国内外国际青年旅舍住宿价格的优惠，同时在世界各地享有逾三千项的优惠。</p>
                        <a href="">
                            <span>￥50</span>
                        </a>
                    </div>
                </div>
                <div class="list2">
                    <div class="top2">
                        <a href="">
                            <img src="http://www.yhachina.com/data/images/2016-05-05/572b2e6779b75.jpg" alt="">
                        </a>
                    </div>
                    <div class="explain1">
                        <h3>国际青年旅舍终身会员卡</h3>
                        <p>全球通用，终身有效，适合身为青年旅舍忠实粉丝的你。</p>
                        <a href="">
                            <span>￥500</span>
                        </a>
                    </div>
                </div>
            </div> 
        </div>

        <div class="finally">
            <div class="container">
                <h2>如果您的会员已过期，可申请续卡</h2>
                <div class="two">
                    <a href="">会员卡号查询</a>
                    <a href="">寄送信息查询</a>
                </div>
            </div>
        </div>

        </div>
    <my-footer></my-footer>
</div>
    
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import MyFooter from '@/components/MyFooter.vue'
    export default {
  components: { MyHeader,MyFooter },
        
    }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.banner{
    height: 700px;
    background: url(http://www.yhachina.com/images/membership/membership-banner.jpg) no-repeat center;
    >.container{
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        width: 100%;
        >h2{
            font-size: 40px;
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 5px rgb(0 0 0 / 70%);
            >font{
				vertical-align: super;
				font-size: 50%;

			}
        }
        >.bottom{
            padding-top: 50px;
            >a{
                display: inline-block;
                width: 200px;
                line-height: 50px;
                color: #f7941c;
                font-size: 20px;
                font-weight: bold;
                background-color: #fff;
                margin: 0 10px;
                border-radius: 25px;
                text-decoration: none;
            }
        }
    }
    >i{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
}
.box2{
        width: 1080px;
        margin: 0 auto;
        padding: 110px 0;
        >h2{
            font-size: 30px;
            color: #333;
            font-weight: bold;
            text-align: center;
            margin-bottom: 55px;
        }
        >.card{
                margin-right: -135px;
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                >dl{
                    width: 270px;
                    margin-right: 135px;
                    >dt{
                        border-radius: 5px;
                        >img{
                            display: block;
                        }
                    }
                    >dd{
                        text-align: center;
                        color: #333;
                        >h3{
                            font-size: 20px;
                            font-weight: bold;
                            margin: 30px 0 10px;
                        }
                        >p{
                            line-height: 21px;
                            font-size: 14px;
                        }
                    }
                }
            }
    }
    
    .box3{
        height: 1050px;
        background: url(http://www.yhachina.com/images/membership/membership-three.jpg) no-repeat center;
        >.banner2{
            height: 650px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            >.middle2{
                // display: inline-block;
                // vertical-align: middle;
                text-align: center;
                width: 100%;
                >h2{
            font-size: 40px;
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 5px rgb(0 0 0 / 70%);
            >font{
				vertical-align: super;
				font-size: 50%;

			}
        }
        >.five{
            margin: 50px 0 0 0;
            >a{
                display: inline-block;
                width: 165px;
                line-height: 35px;
                height: 35px;
                border: 2px solid #fff;
                border-radius: 20px;
                font-size: 18px;
                text-shadow: 0 0 5px rgb(0 0 0 / 70%);
                color: #fff;
                text-decoration: none;
                margin-left: 5px;
                
            }
        }
        >.bottom2{
            padding-top: 50px;
            >a{
                display: inline-block;
                width: 200px;
                line-height: 50px;
                color: #f7941c;
                font-size: 20px;
                font-weight: bold;
                background-color: #fff;
                //margin: 0 10px;
                border-radius: 25px;
                text-decoration: none;
                box-shadow: 0 0 10px rgb(0 0 0 / 40%);
            }
        }

            }
        }
        >.blue{
            height: 400px;
            display: flex;
                flex-direction: column;
                justify-content: center;
            >.middle3{
                width: 100%;
                text-align: center;
             >h2{
                font-size: 40px;
                color: #fff;
                font-weight: bold;
            }
            >.bottom3{
                padding-top: 50px;
                >a{
                    display: inline-block;
                width: 200px;
                line-height: 50px;
                color: #f7941c;
                font-size: 20px;
                font-weight: bold;
                background-color: #fff;
                border-radius: 25px;
                text-decoration: none;
                box-shadow: 0 0 10px rgb(0 0 0 / 40%);
                }
            }
            
        }
           }
    }
    .select{
        padding: 80px 0 100px;
        width: 1080px;
        //height: 465px;
        margin: 0 auto;
        >h2{
            font-size: 30px;
            color: #333;
            font-weight: bold;
            text-align: center;
        }
        >.bottom4{
            margin: 50px -135px 0 0;
            //text-align: left;
            display: flex;
            justify-content: left;
            >.list1{
                width: 270px;
                text-align: center;
                margin: 0 115px 0 10px;
                >img{
                    width: 270px;
                    height: 175px;
                    display: block;
                }
                >.explain{
                height: 170px;
                >h3{
                    font-size: 20px;
                    font-weight: bold;
                    margin: 25px 0 15px;
                }
            >p{
                font-size: 14px;
                line-height: 21px;
                height: 85px;
            }
            >a{
                text-decoration: none;
                >span{
                    display: inline-block;
                    width: 180px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 20px;
                    font-weight: bold;
                    color: #fff;
                    border-radius: 20px;
                    background-color: #f7941c;
                }

            }
            
            }
            }
            >.list2{
            width: 270px;
            text-align: center;
            margin: 0 115px 0 10px;
            >img{
                    width: 270px;
                    height: 175px;
                    display: block;
                }
                >.explain1{
                height: 170px;
                >h3{
                    font-size: 20px;
                    font-weight: bold;
                    margin: 25px 0 15px;
                }
            >p{
                font-size: 14px;
                line-height: 21px;
                height: 85px;
            }
            >a{
                text-decoration: none;
                >span{
                    display: inline-block;
                    width: 180px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 20px;
                    font-weight: bold;
                    color: #fff;
                    border-radius: 20px;
                    background-color: #f7941c;
                }

            }
            
            }
        }
        }
    }
    .finally{
        height: 330px;
        background-color: #478cc7;
        >.container{
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            //width: 100%;
            height: 370px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            >h2{
                text-shadow: none;
                font-size: 40px;
                color: #fff;
                font-weight: bold;
            }
            >.two{
                padding: 50px;
                >a{
                    display: inline-block;
                width: 200px;
                line-height: 50px;
                color: #f7941c;
                font-size: 20px;
                font-weight: bold;
                background-color: #fff;
                border-radius: 25px;
                text-decoration: none;
                margin-left: 25px;
                box-shadow: 0 0 10px rgb(0 0 0 / 40%);
                }
            }
        }
    }
</style>